/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-10-17 17:08:52
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-19 14:32:29
 * @FilePath: \实训二——宏业找房\app\demo\src\components\City\City.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from 'react'
import { Select, Input, Button } from 'antd';
import { Model } from '../../city'

export const PropertySearch = (props) => {
    const { Option } = Select;
    const [capitals, setCapitals] = useState([]) // 省份
    const [city, setCity] = useState([]) // 市
    const [areaList, setAreaList] = useState([]) // 区
    
    const [one,setOne]=useState('')
    const [two, setTwo] = useState('')
    const [three, setThree] = useState('')
    const [four, setFour] = useState('')

    useEffect(() => {
        handleAddressData()
    }, [])
    // 初始化 地区数据
    const handleAddressData = () => {
        const da = Model;
        if (da && da.length > 0) {
            const da = Model;
            setCapitals(da)
        }
    }
    // 省份
    const getCity = (value) => {
        let da = [];
        capitals.map(item => {
            if (item.name === value) {
                da = item.cityList
            }
        })
        setOne(value)
        setCity(da)
    }
    // 市
    const getSreaList = (value) => {
        let ci = [];
        city.map(item => {
            if (item.name === value) {
                ci = item.areaList
            }
        })
        setTwo(value)
        setAreaList(ci)
    }
    // 三级联动
    const getData = (value) => {
        setThree(value)
    }
 
    // 搜索
    const Search=()=>{
        props.sendValueToFather({ one, two, three, four });
    }

    return (
        <div className='Search'>
            <Select
                showSearch
                style={{ width: 220, marginRight: '5px' }}
                placeholder="省份"
                optionFilterProp="children"
                onChange={getCity}
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
                {capitals.map((item, index) => { return (<Option value={item.name} key={index} >{item.name}</Option>) })}
            </Select>
            <Select
                showSearch
                style={{ width: 220, marginRight: '5px' }}
                placeholder="市"
                optionFilterProp="children"
                onChange={getSreaList}
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
                {city.map((item, index) => { return (<Option value={item.name} key={index} >{item.name}</Option>) })}
            </Select>
            <Select
                showSearch
                style={{ width: 220 }}
                placeholder="区"
                optionFilterProp="children"
                onChange={getData}
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
                {areaList.map((item, index) => { return (<Option value={item} key={index} >{item}</Option>) })}
            </Select>
            <Input placeholder="关键字" style={{ width: '220px', marginLeft: '50px' }} onChange={(e) => setFour(e.target.value)} />
            <Button type="primary" style={{ width: '220px' }} onClick={Search}>搜索</Button>
           
        </div>
    )
}
